<template>
    <div >
     <el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :limit="maxNum" :on-exceed="outlimit"  :before-upload="beforeAvatarUpload"
          :file-list="value" :on-change="uploadonchange" >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip" style="color:red">*只能上传jpg/png文件，且不超过{{maxNum}}张，可以调整顺序第一张为主图</div>
            <div slot="file" slot-scope="{file,fileList}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="upImageBefore(file)">
                  <i class="el-icon-back"></i>
                </span>
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete"  @click="upImageDele(file)">
                  <i class="el-icon-delete"></i>
                </span>
                  <span class="el-upload-list__item-delete" @click="upImageNext(file)">
                  <i class="el-icon-right"></i>
                </span>
              </span>
            </div>
        </el-upload>
    <el-dialog :visible.sync="dialogVisible" style="z-index:9999">
      <img width="300" height="300" :src="dialogImageUrl" alt="">
    </el-dialog>
    </div>
</template>
<script>
export default {
  name: 'uploadImage',
  props: {
      value: {
        type: Array,
        default () {
          return []
        }
      },
      collapsed: {
        type: Boolean,
        default () {
          return true;
        }
      },
      maxNum: {
        type: Number,
        default () {
          return 4;
        }
      },
       maxSize: {
        type: Number,
        default () {
          return 2;
        }
      }
    },
    data() {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
        };
    },
    methods:{
            //超过上传限制
        outlimit(){
           this.$util.errorMsg("超出上传文件个数限制");
        },
        //查看图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        beforeAvatarUpload(file){
          let filename = file.name.toLowerCase();
            const isJPG = this.format(filename,["jpg","png"]);
            const isLt2M = file.size / 1024 / 1024 < this.maxSize;
            if (!isJPG) {
              this.$util.errorMsg('上传文件只能是 图片格式!');
            }
            if (!isLt2M) {
              this.$util.errorMsg('上传文件大小不能超过'+ this.maxSize+'MB!');
            }
            return isJPG && isLt2M;
        },
        upImageBefore(file){
            var index =  this.value.indexOf(file);
            if(index>0){
                let left =  this.value[index];
                this.value.splice(index, 1);
                this.value.splice(index-1,0,left);
            }
            
        },
        upImageNext(file){
            var index =  this.value.indexOf(file);
            if(index<this.value.length){
                let right =  this.value[index];
                this.value.splice(index, 1);
                this.value.splice(index+1,0,right);
            }
        },
        //删除图片
        upImageDele(file){
            let fileList = this.value;
            if(fileList && fileList.length>0){
                for(var i=0;i<fileList.length;i++){
                if(fileList[i]==file){
                    fileList.splice(i, 1)
                    break;
                }
                }
            }
        },
        uploadonchange(file,filelist){
            this.value.push(file);
            if(!this.beforeAvatarUpload(file)){
              this.upImageDele(file);
            }
        },
        format(filename,arr){
           let posation = filename.lastIndexOf(".");//取到文件名开始到最后一个点的长度
           let fileNameLength = filename.length;//取到文件名长度
           let fileFormat = filename.substring(posation + 1, fileNameLength);//截
           if(arr!=null && arr.length>0){
              for(var i=0;i<arr.length;i++){
                if(arr[i]==fileFormat){
                  return true;
                }
              }
              return false;
           }
           return true;
        }
    }
}
</script>